<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./snake.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .box {
            /* width: 100%; */
            /* height: 100%; */
            display: flex;
            align-items: center;
            justify-content: center;

        }

        p {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;

            line-height: 100px;
            background: #ccc;
            display: none;
            font-size: 50px;
            text-align: center;
        }

        span {
            display: block;
            width: 300px;
            height: 100px;
            border: 1px solid red;
            margin: 100px auto;
        }
    </style>

</head>

<body>
    <!-- <div class="box">
        <p><span>重新开始</span></p>
    </div> -->
</body>

</html>
<script>
    //地图构造函数
    function SnakeMap() {

    }
    //地图构造函数中添加显示方法
    SnakeMap.prototype.show = function () {
        let divDom = document.createElement("div");
        divDom.className = "map";
        //div加入到body标签在
        document.body.appendChild(divDom);
        console.log(divDom)
    }

    //食物构造函数
    function Food() {
        //记录食物坐标
        this.x = 0;
        this.y = 0;
        //保存食物div的dom对象
        this.foodDom = null;
    }
    Food.prototype.show = function () {
        if (!this.foodDom) {
            //如果食物不存在，就创建标签加入到页面；
            this.foodDom = document.createElement("div");
            this.foodDom.className = "food";
            this.foodDom.style.position = "absolute";
            document.querySelector(".map").appendChild(this.foodDom);

        }
        //在生成随机数，写的是固定的39，29 这里跟地图没关系
        this.x = this.makeRandom(0, 39);
        this.y = this.makeRandom(0, 29);
        this.foodDom.style.left = this.x * 20 + "px";
        this.foodDom.style.top = this.y * 20 + "px";
    }
    Food.prototype.makeRandom = function (min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    //蛇的构造函数
    function Snake() {
        //记录蛇移动的方向，开始默认为右边
        this.direct = "right";
        //记录蛇每一节的身体信息，由于每一节都需要记录，所以格式整体为数组格式的对象，将第一个元素作为蛇头；
        this.bodys = [
            //每个元素dom属性记录蛇每一节对应div的dom对象，如果是null，表示目前div还没创建，否则就是dom对象
            { x: 2, y: 0, backgroundImage: "url('imges/head.png')", dom: null },

            { x: 1, y: 0, backgroundImage: "url('imges/body.png')", dom: null },
            { x: 0, y: 0, backgroundImage: "url('imges/body.png')", dom: null }

        ];
        // console.log(this.bodys)
    }


    // 蛇的原型上添加显示蛇的方法
    Snake.prototype.show = function () {
        // 创建三个div 设置到页面中
        for (let i = 0; i < this.bodys.length; i++) {
            if (!this.bodys[i].dom) {
                // 目前div的dom对象还不存在
                this.bodys[i].dom = document.createElement('div');
                this.bodys[i].dom.className = 'snake';
                // 设置蛇的每一节的背景图片 最后一个作为蛇头部
                this.bodys[i].dom.style.backgroundImage = this.bodys[i].backgroundImage;
                // 加入页面上
                document.querySelector('.map').appendChild(this.bodys[i].dom)
            }
            // 设置left值
            this.bodys[i].dom.style.left = this.bodys[i].x * 20 + 'px';
            this.bodys[i].dom.style.top = this.bodys[i].y * 20 + 'px';
        }
    }

    //添加蛇的移动方法
    Snake.prototype.move = function () {
        //移动就是修改每一节蛇的坐标
        //反复循环 修改坐标
        for (let i = this.bodys.length - 1; i > 0; i--) {
            this.bodys[i].x = this.bodys[i - 1].x;
            this.bodys[i].y = this.bodys[i - 1].y;
        }


        //修改头部坐标
        switch (this.direct) {
            case "left":
                this.bodys[0].x -= 1;
                break;
            case "right":
                this.bodys[0].x += 1;
                break;
            case "up":
                this.bodys[0].y -= 1;
                break;
            case "down":
                this.bodys[0].y += 1;
            default:
                break;
        }

        //判断蛇是否吃到食物
        this.hasEat();
        if (!this.hasDie()) {
            this.show();
        }
    }
    Snake.prototype.hasEat = function () {
        //用蛇的头部坐标与食物进行比较
        if (this.bodys[0].x == food.x && this.bodys[0].y == food.y) {
            //吃到了食物
            //获取蛇尾巴的坐标
            let lastIndex = this.bodys.length - 1;
            //增加一节设置与尾巴重合
            this.bodys.push({
                x: this.bodys[lastIndex].x,
                y: this.bodys[lastIndex].y,
                backgroundImage: this.bodys[lastIndex].backgroundImage,
                dom: null
            });
            //将食物在随机
            food.show();
        }
        //判断蛇是否死亡
        Snake.prototype.hasDie = function () {
            let header = this.bodys[0];
            if (header.x < 0 || header.x > 39 || header.y < 0 || header.y > 29) {
                clearInterval(timer);
                alert("游戏结束")
                // document.querySelector(".map").style.display = "none";
                // document.querySelector("p").style.display = "block"
                // return true;
            }
            // return false;
        }
    }


    //地图实例对象
    let map = new SnakeMap;
    map.show();

    //食物实例对象
    let food = new Food;
    food.show();

    //蛇的实例对象
    let snake = new Snake;
    snake.show();

    //定时器实现蛇的移动
    let timer = setInterval(function () {
        snake.move();
        // console.log(snake.move())
    }, 100);

    //控制蛇的方向
    document.onkeydown = function (event) {
        switch (event.keyCode) {
            case 37:
                snake.direct = "left";
                break;
            case 38:
                snake.direct = "up";
                break;
            case 39:
                snake.direct = "right";
                break;
            case 40:
                snake.direct = "down";
                break;
            default:
                break;
        }
    }

    //重新开始
    // document.querySelector("p").onclick = function () {
    //     // console.log(1111)
    //     document.querySelector(".map").style.display = "block";
    //     document.querySelector("p").style.display = "none";
    //     let timer = setInterval(function () {

    //         snake.move();

    //     }, 100);

    // }
</script>